<template>
  <div class="baogao">
    <el-table :data="paginatedTableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="sgbm" label="事故编号" />
      <el-table-column prop="sglx" label="事故类型" />
      <el-table-column prop="sgfssj" label="发生时间" />
      <el-table-column prop="bmmc" label="处理单位" />
      <el-table-column prop="sgdd" label="事故地点" />
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-button
            type="text"
            @click="fetchUrl(scope.row.sgbm, scope.row.hasDuty)"
            >下载</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="spans">
      <el-pagination
        :page-size="pageSize"
        :current-page="currentPage"
        layout="prev, pager, next"
        :total="totalItems"
        @current-change="handlePageChange"
      />
      <span>总页数：{{ totalPages }}</span>

      <span style="">总条数：{{ totalItems }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  GetReportUrlDeathInfo,
  GetReportUrlDeath,
} from "@/service/api/report-analysis";

const tableParent = ref([]);
const dataprop = ref({
  pageNum: "1",
  pageSize: "10",
  startTime: "",
  endTime: "",
});
const totalItems = computed(() => tableParent.value.length);
const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));
const pageSize = ref(10);
const currentPage = ref(1);
const paginatedTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableParent.value.slice(start, end);
});
const handlePageChange = (newPage: number) => {
  currentPage.value = newPage;
};
const fetchUrl = async (data, val) => {
  try {
    // 当 val 不存在时，弹窗询问
    if (!val && !window.confirm("当前事故未被定责，是否继续下载？")) {
      return;
    }
    await GetReportUrlDeath(data);
  } catch (err) {
    console.error(err);
  }
};
const fetch = async () => {
  try {
    const res: any = await GetReportUrlDeathInfo(dataprop.value);
    tableParent.value = res.rows;
  } catch (err) {
    console.log(err);
  }
};

watch(
  () => dataprop.value,
  () => {
    fetch();
  }
);

onMounted(() => {
  fetch();
});

defineExpose({
  dataprop,
});
</script>

<style lang="less" scoped>
.baogao {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: white;
  .cell {
    text-align: center;
  }
}

:deep(.el-pagination button:disabled),
:deep(.el-pagination .btn-prev),
:deep(.el-pagination > .is-last) {
  background: transparent !important;
}
:deep(.el-pager li) {
  background: transparent !important;
  color: white !important;
}
:deep(.el-pager li.is-active) {
  color: #429ea5 !important;
}
.el-table__inner-wrapper {
  text-align: center;
}
:deep(.cell) {
  text-align: center !important;
}
.spans {
  display: flex;
  align-items: center;
  gap: 20px;
  color: white;
}
</style>